<template>
  <div class="app">
    <button @click="active = !active">123</button>
    <transition name="compare">
      <div v-if="active">你好</div>
    </transition>
    <transition name="home">
      <div v-if="!active">不好</div>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: false
    }
  },
  created () {
    console.log(this)
  }
}
</script>

<style lang="scss" scoped>
div {
  height: 100px;
  transition-property: all;
}

.compare-enter-active,
.compare-leave-active {
  transition: all .3s linear;
}

.compare-leave-to,
.compare-enter {
  transform: translateY(100%) scale(1, 0);
  opacity: 0;
}
.home-enter-active,
.home-leave-active {
  transition: all .3s linear;
}

.home-leave-to,
.home-enter {
  transform: translateY(100%) scale(1, 0);
  opacity: 0;
}
</style>
